<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="lib/echarts.js"></script>
    <script src="lib/data1.js"></script>
    <script src="lib/data2.js"></script>
    <script src="lib/data3.js"></script>
    <!--第三章图标的数据-->
    <script src="lib/data9.js"></script>
    <script src="lib/data4.js"></script>
    <script src="lib/data5.js"></script>
    <script src="lib/data6.js"></script>
    <title></title>
    <link rel="stylesheet" href="css/lanren.css">
    <link rel="stylesheet" href="css/fullpage.min.css">

</head>
<style>
    #fp-nav ul li a.active span,
    #fp-nav ul li a span {
        background-color: black !important;
    }

    body {
        background: #fef8ef;
    }


    .section1 {
    }
    
    .section2 {
        background: url(./image/tree.png) no-repeat right -115px top -255px;
        position: relative;
    }

    .section3 {
    }

    .section4 {
        background: url(./image/flower.png) no-repeat left -105px bottom -55px;
        position: relative;
    }
    
  


    .content h3 {
        white-space: nowrap;
        position: absolute;
        top: 0;
        /* left: 45%; */
        /* transform: translate(-50%, 0); */
        z-index: 999;
    }
</style>
<script src="js/jquery.min.js"></script>
<script src="js/fullpage.min.js"></script>

<body>
    <!--灰色遮罩 默认不显示-->
    <div class="cover" id="cover">

    </div>
    <!--点击图表出现图片的元素-->
    <div onclick="Show()" id="Show1">
        <!--id代表图表中散点的id 默认不显示-->
    <div id="E" class="show" style="display:none;">
        <img src="images/E/1.jpg">
        <img src="images/E/2.jpg">
        <img src="images/E/3.jpg">
        <img src="images/E/4.jpg">
        <img src="images/E/5.jpg">
    </div>
    <div id="A" class="show" style="display:none;">
        <img src="images/A/1.jpg">
        <img src="images/A/2.jpg">
        <img src="images/A/3.jpg">
        <img src="images/A/4.jpg">
        <img src="images/A/5.jpg">
    </div>
    <div id="B" class="show" style="display:none;">
        <img src="images/B/1.jpg">
        <img src="images/B/2.jpg">
        <img src="images/B/3.jpg">
        <img src="images/B/4.jpg">
    </div>
    <div id="C" class="show" style="display:none;">
        <img src="images/C/1.jpg">
        <img src="images/C/2.jpg">
        <img src="images/C/3.jpg">
        <img src="images/C/4.jpg">
    </div>
    <div id="D" class="show" style="display:none;">
        <img src="images/D/1.jpg">
        <img src="images/D/2.jpg">
        <img src="images/D/3.jpg">
        <img src="images/D/4.jpg">
        <img src="images/D/5.jpg">
    </div>   
    <div id="F" class="show" style="display:none;">
        <img src="images/F/1.jpg">
        <img src="images/F/2.jpg">
        <img src="images/F/3.jpg">
        <img src="images/F/4.jpg">
    </div>
    <div id="G" class="show" style="display:none;">
        <img src="images/G/1.jpg">
        <img src="images/G/2.jpg">
        <img src="images/G/3.jpg">
        <img src="images/G/4.jpg">
    </div>
    <div id="H" class="show" style="display:none;">
        <img src="images/H/1.jpg">
        <img src="images/H/2.jpg">
        <img src="images/H/3.jpg">
        <img src="images/H/4.jpg">
        <img src="images/H/5.jpg">
    </div>
    <div id="I" class="show" style="display:none;">
        <img src="images/I/1.jpg">
        <img src="images/I/2.jpg">
        <img src="images/I/3.jpg">
        <img src="images/I/4.jpg">
        <img src="images/I/5.jpg">
    </div>
    <div id="J" class="show" style="display:none;">
        <img src="images/J/1.jpg">
        <img src="images/J/2.jpg">
    </div>
    <div id="K" class="show" style="display:none;">
        <img src="images/K/1.jpg">
        <img src="images/K/2.jpg">
        <img src="images/K/3.jpg">
    </div>
    <div id="L" class="show" style="display:none;">
        <img src="images/L/1.jpg">
        <img src="images/L/2.jpg">
        <img src="images/L/3.jpg">
        <img src="images/L/4.jpg">
    </div>
    <div id="M" class="show" style="display:none;">
        <img src="images/M/1.jpg">
        <img src="images/M/2.jpg">
        <img src="images/M/3.jpg">
    </div>
    <div id="N" class="show" style="display:none;">
        <img src="images/N/1.jpg">
        <img src="images/N/2.jpg">
    </div>
    <div id="O" class="show" style="display:none;">
        <img src="images/O/1.jpg">
        <img src="images/O/2.jpg">
    </div>
    </div>
    <div id="dowebok">
        <!--第一张表-->
        <div class="section section1">
            <div class="content">
                <h3 id="title1"></h3>
                <div id="chart1" style="width: 100vw;height: 90vh;"></div>
            </div>

        </div>
 <!--第二张图表-->
        <div class="section section2">

            <div class="content">
                <h3 id="title2">各年代风格分布</h3>
                <div id="chart2" style="width: 100vw;height: 60vh;"></div>
                <ul id="im2Ul" class="ctn2">
                </ul>
            </div>
        </div>
<!--切换-->
          <div style="position:fixed;padding-top:4vh;margin-left:8vw;z-index:100000;width:20vw;height:10vh;" onclick="switchgraph()" id="TSNE">&nbsp;</div>
    
        <h6 id="title3" style="position:fixed;margin-left:2vw;margin-top:1vh;z-index:100000;">风格量化结果</h6>
         <img src="png.png" style="position:fixed;padding-top:7vh;z-index:10000;width:10vw;height:93vh;margin-left:-1.3vw">
         <!--第三张图表-->
          <div class="section section3" id="main" style="z-index:10;width: 100vw;height:80vh;margin-left:-10px">
              <!-- <h1 style="text-align: center;">第一屏</h1> -->
        
      </div>
       <!--切换后的图表-->
          <div  id="main1" style="z-index:1000;width: 100vw;height:100.1vh;display:none;margin-left:-10px">
              <!-- <h1 style="text-align: center;">第一屏</h1> -->
    
      </div>
<!--第四张图表-->
        <div class="section section4">
            <!-- <h1 style="text-align: center;">第一屏</h1> -->
            <div class="content">
                <h3 id="title4">风格迁移</h3>
                <div id="chart4" style="width: 70vw;height: 90vh;"></div>
                <!-- <h3>第三屏</h3> -->
                <div id="im" class="ctn">
                    <img src="" alt="" id="image" />
                    <div id="information"></div>
                </div>
            </div>


        </div>

    </div>

</body>
<style>
    <!--灰色遮罩-->
    .cover{
        display:none;
        position:fixed;
      
    
        width:100%;
        height:100%;
        background-color:#000;
filter:alpha(opacity=50);
-moz-opacity:0.5;

opacity:0.5;

left:0px;

top:0px;

z-index:5;
    }
    .show{
    
        text-align: center;
        justify-content: center; 
        white-space:nowrap;
        overflow-x:scroll;
        z-index:10;
       position:fixed;
animation-name:appear;
animation-duration:3s;
overflow-x: scroll; -webkit-overflow-scrolling:touch;display: -webkit-box;
    }
@keyframes appear{
    0%{opacity:0.1}
    100%{
    opacity:1
    }
}
    .show img{
        width:20vw;
        height:50vh;
        margin-top:25vh;
       opacity:1;
       display: inline-block;

    }
    body {
        margin: 0;

    }

    .tab {
        width: 100vw;
        height: 10vh;
        display: flex;
        flex-direction: row;
    }

    .tabItem {
        width: 25vw;
        line-height: 10vh;
        font-size: 140%;
        font-weight: bold;
        text-align: center;
        border: 1px solid gainsboro;
        cursor: pointer;
        box-sizing: border-box;
        font-family: SimSun;
    }

    .content {
        width: 100vw;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        overflow: hidden;
    }

    .ctn {
 
        width: 30vw;
        height: 90vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-left: auto;
       
    }

    .ctn img {
       
        height: 36vh;
        margin-top: 25vh;
        margin-bottom: 4vh;
        display: none;

    }

    .ctn2 {
       
        width: 100vw;
        height: 40vh;
        display: flex;
        flex-direction: row;
        align-items: center;
        overflow-x: scroll;

    }

    .ctn2 img {
        width: 15vw;
        height: 30vh;
        margin-left: 1vw;

    }

    #information {
        font-family: SimSun;
        font-size: 140%;
        text-align: left;
        color: #333;

    }

    .information2 {
        font-family: SimSun;
        font-size: 140%;
        margin-left: 0.5vw;
        z-index: -1;
    }

    .name {
        position: fixed;
        color: #333;

    }

    .name1 {
        position: fixed;
        top: 104vh;
        left: 47.5vw;
    }

    .name2 {
        position: fixed;
        top: 142vh;
        right: 17vw;
    }

    .name3 {
        position: fixed;
        bottom: -98vh;
        left: 47.5vw;
    }

    .name4 {
        position: fixed;
        top: 141vh;
        left: 17vw;
    }



    .add {
        writing-mode: vertical-lr;

    }
   
</style>
<script>
//切换函数
function switchgraph(){
if(main.style.display!="none"){
    main.style.display="none"
    main1.style.display="flex"

}else{

    main.style.display="flex"
    main1.style.display="none"
}
    }
    let chart1 = echarts.init(document.getElementById('chart1')) //初始化图表实例
    let chart2 = echarts.init(document.getElementById('chart2')) //初始化图表实例
    
    let chart4 = echarts.init(document.getElementById('chart4')) //初始化图表实例
//点击出现图片
    function Show(){
        document.getElementById(E).style.display="none"
        Show1.style.display="none"
        cover.style.display="none"
    }
    //绑定事件
chart1.on("click",function(params){
    Show1.style.display="flex"
    //记录上一次点击的散点
    E=params.value[2]
   
   //调整定位
    document.getElementById(params.value[2]).style["margin-left"]= (100-(document.getElementById(params.value[2]).innerHTML.split("img").length-1)*20)/2+"vw"
   document.getElementById(params.value[2]).style.display="flex"
   //显示遮罩
   cover.style.display='flex'
})
    //初始化页面滑动  一页一页的
    new fullpage('#dowebok', {
        anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage'],//一共四页 这是每页的 哈希值  也是就浏览器url上面  #后面的值
        navigation: true, 
        navigationPosition: 'right', //小点点位置
        navigationTooltips: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage'],   //小点点 换到哪一页
        touchSensitivity: 7, //滚林灵敏度
       //滚动到最顶部后是否连续滚动到顶部
        loopTop: false,
        //滚动到最底部后是否连续滚动到顶部
        loopBottom: false 
    });

    titleDongHua($("#title1"))
    titleDongHua($("#title2"))
    titleDongHua1($("#title3"))
    titleDongHua($("#title4"))

    //每次滑动滚轮
    window.addEventListener("wheel", function (e) {
        let evt = e || window.event;  //考虑兼容性
        evt.preventDefault();
        if (evt.deltaY > 0) {  //在火狐中 向下滚动是3 谷歌是125
            console.log("向下滚动");
        } else {           //在火狐中 向上滚动是-3 谷歌是-125
            console.log("向上滚动");
        }
        //停止动画
        $("#title1").stop();
        $("#title2").stop();
        $("#title3").stop();
        $("#title4").stop()
        //重新加载图标
        chart1.clear()
        chart2.clear()
     
        chart4.clear()
        chart1Init(chart1)
        chart2Init(chart2)
    
        chart4Init(chart4)
        //标题动画
        titleDongHua($("#title1"))
        titleDongHua($("#title2"))
        titleDongHua1($("#title3"))
        titleDongHua($("#title4"))
        //检查事件
        // console.log(evt.type, evt.deltaX, evt.deltaY, evt.deltaZ);
    }, {
        passive: false
    });


    function titleDongHua(title) {
        title.css("opacity", '0')
        title.css("font-size", '25px')
        title.css("left", '6px')
        //延迟1000毫秒之后浮现（800毫秒完成）
        title.delay(1000).animate(
            {
                "left": '6px',

                "opacity": '0.8',
                "font-size": "25px"
            }, 800, null);

    }
    function titleDongHua1(title) {
        title.css("opacity", '0')
        title.css("font-size", '10px')
        title.css("left", '19px')
        //延迟1000毫秒之后浮现（800毫秒完成）
        title.delay(1000).animate(
            {
                "left": '10px',

                "opacity": '0.8',
                "font-size": "19px"
            }, 800, null);

    }


    function chart1Init(chart) {
        chart1.clear() //清空图表

        let scatter = []
        //遍历数据获取到散点XY坐标与名称并生成图片路径
        for (let i in data1) {
            scatter.push({
                value: [data1[i]['D1'],
                data1[i]['D2'],
                data1[i]['一']
                ],
                symbol: 'image://image/image1/' + data1[i]['一'] + '.png'

            })
        }


        let scatter2 = []
        //遍历数据获取散点坐标并生成图片路径
        for (let i in data3) {
            scatter2.push({
                value: [data3[i]['D1'], data3[i]['D2'], data3[i]['一']],
                symbol: 'image://image/image1/' + data1[i]['一'] + '.png'

            })
        }

        let option = { //图表配置项
            backgroundColor: '',
            title: [
                {
                    text: "意象感知",
                    left: '23%',
                    top: '0px',
                    textStyle: {
                        fontSize: 30,
                    }
                },
                {
                    text: "情感映射",
                    right: '23%',
                    top: '0px',
                    textStyle: {
                        fontSize: 30,
                    }
                }],

            grid: [
                {
                    left: "10%",
                    right: "55%",
                    top: '10%',
                    bottom: '10%',
                    containLabel: false
                },
                {
                    left: "55%",
                    right: "10%",
                    top: '10%',
                    bottom: '10%',
                    containLabel: false
                },
            ],
            xAxis: [
                { gridIndex: 0, min: "-1", max: 1 },
                { gridIndex: 1, min: "-1", max: 1 }
            ],
            yAxis: [
                { gridIndex: 0, min: "-1", max: 1 },
                { gridIndex: 1, min: "-1", max: 1 }
            ],
            tooltip: {},
            series: [
                {
                    name: 'scatter', //数据项名称
                    xAxisIndex: 0,
                    yAxisIndex: 0,
                    symbolSize: [130, 70], //散点尺寸
                    data: scatter, //坐标数据
                    type: 'scatter', //类型
                    label: { //标签
                        show: false,
                        formatter(e) {
                            console.log(e)
                            return e.value[2]
                        }
                    },
                    tooltip: { //高亮显示
                        formatter(e) {
                            console.log(e)
                            return e.value[2] + ':' + '质妍:' + e.value[0] + ',' + '真草:' + e.value[1]
                        }
                    }
                },
                {
                    name: 'scatter', //名称
                    xAxisIndex: 1,
                    yAxisIndex: 1,
                    symbolSize: [130, 70], //散点尺寸
                    data: scatter2, //散点数据
                    type: 'scatter', //类型
                    label: { //标签
                        show: false,
                        formatter(e) {
                            console.log(e)
                            return e.value[2]
                        }
                    },
                    tooltip: { //高亮显示
                        formatter(e) {
                            console.log(e)
                            return e.value[2] + ':' + '愉悦度:' + e.value[0] + ',' + '唤醒度:' + e.value[1]
                        }
                    }
                }
            ],
            animationDuration: 3000,//加入动画事件，是元素慢慢加载3s执行完成
            animationEasing: "cubicInOut"
        }

        for (let i in data2) {
            option.series.push({
                type: 'line', //类型
                xAxisIndex: 0,
                yAxisIndex: 0,
                color: '#333', //颜色
                symbolSize: '0', //端点尺寸
                lineStyle: {

                    width: 1 //线条宽度
                },
                data: [
                    [0, 0], //起点
                    [data2[i]['D1'], data2[i]['D2'], data2[i]['意象']] //终点坐标
                ],

                label: { //标签
                    formatter(e) {
                        return e.value[2]
                    },
                    show: true
                }

            })
        }

        chart1.setOption(option) //生成实例
    }
//储存数据
    data10=new Array();
    data13=new Array();
    data14=new Array();
    datA=new Array();
   data12=new Array();
    

   //x轴元素
data11=[1,2,3,4,5,6,7,"茂密","文静","险峭","绵密","怪奇","老辣","狞厉","丰肥","丰润","高古","婉约","冲和","圆融","天真","肥劲","倔强","潇洒","飘逸","豪放","犷野","险劲","瘦硬","粗率","圆转","紧结","圆熟","疏朗","拙朴","清雅","自然","醇和","沉着","秀逸","爽利","端庄","劲健","老成","雄浑","颇骏","方正","刚健","工巧","古朴","姿媚","宽博"]
for(a1=0;a1<=(data9.length-1)*52;){
    for(a2=0;a2<=data9.length-1;a2+=1){
for(t=7;t<=51;t++){
    //分类并将数据写入数组
            if(data9[a2][1]=="原版"){
    data10[data10.length]=[data9[a2][0],data11[t],data9[a2][t]*15,"rgba("+(165-200*data9[a2][t])+","+(137-200*data9[a2][t])+","+(78-200*+data9[a2][t])+","+data9[a2][t]+")"];
}
if(data9[a2][1]=="笔画"){
    data13[data13.length]=[data9[a2][0],data11[t],data9[a2][t]*15,"rgba("+(165-200*data9[a2][t])+","+(137-200*data9[a2][t])+","+(78-200*+data9[a2][t])+","+data9[a2][t]+")"];
}
if(data9[a2][1]=="章法统一"){
    data14[data14.length]=[data9[a2][0],data11[t],data9[a2][t]*15,"rgba("+(165-200*data9[a2][t])+","+(137-200*data9[a2][t])+","+(78-200*+data9[a2][t])+","+data9[a2][t]+")"];
}
if(data9[a2][1]=="一"){
    data12[data12.length]=[data9[a2][0],data11[t],data9[a2][t]*15,"rgba("+(165-200*data9[a2][t])+","+(137-200*data9[a2][t])+","+(78-200*+data9[a2][t])+","+data9[a2][t]+")"];
}
    a1+=1;
}
}
}

//储存数据
data21=new Array();
data22=new Array();
data23=new Array();
data24=new Array();

for(a1=0;a1<=(data20.length-1)*52;){
    for(a2=0;a2<=data20.length-1;a2+=1){
for(t=7;t<=51;t++){//同上
            if(data20[a2][1]=="原版"){
    data21[data21.length]=[data20[a2][0],data11[t],data20[a2][t]*15,"rgba("+(165-200*data20[a2][t])+","+(137-200*data20[a2][t])+","+(78-200*+data20[a2][t])+","+data20[a2][t]+")"];
}
if(data20[a2][1]=="笔画"){
    data22[data22.length]=[data20[a2][0],data11[t],data20[a2][t]*15,"rgba("+(165-200*data20[a2][t])+","+(137-200*data20[a2][t])+","+(78-200*+data20[a2][t])+","+data20[a2][t]+")"];
}
if(data20[a2][1]=="章法统一"){
    data23[data23.length]=[data20[a2][0],data11[t],data20[a2][t]*15,"rgba("+(165-200*data20[a2][t])+","+(137-200*data20[a2][t])+","+(78-200*+data20[a2][t])+","+data20[a2][t]+")"];
}
if(data20[a2][1]=="一"){
    data24[data24.length]=[data20[a2][0],data11[t],data20[a2][t]*15,"rgba("+(165-200*data20[a2][t])+","+(137-200*data20[a2][t])+","+(78-200*+data20[a2][t])+","+data20[a2][t]+")"];
}
    a1+=1;
}
}
}
// 基于准备好的dom，初始化echarts实例y
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {

    "backgroundColor": "#fef8ef",
"animation": true,
"animationThreshold": 2000,
"animationDuration": 1000,
"animationEasing": "cubicOut",
"animationDelay": 0,
"animationDurationUpdate": 300,
"animationEasingUpdate": "cubicOut",
"animationDelayUpdate": 0,
xAxis: [{ 

       type: 'category', //x轴类型
                boundaryGap: false, //关闭两遍留白
                "axisLabel": {
                    interval: 0,
                    rotate:90,
                },
                "nameLocation": "end",
            "nameGap": 15,
            "gridIndex": 0,
            "axisLine": {
                "show": true,
                "onZero": true,
                "onZeroAxisIndex": 0,
                "lineStyle": {
                    "show": true,
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid",
                    "color": "#533a24"
                }},
                //x轴文字
    data: ["何伯超墓志","华山庙碑","曾侯乙编钟","夫子庙堂碑","李璧墓志","天亡簋","乙瑛碑","兰亭序","荐季直表","伯远帖","不空和尚碑","东方朔画赞碑","倪宽赞","张迁碑","临石鼓文","石鼓文","北魏常敬兰墓志铭","蜀素帖","行书蔡行故卷","张猛龙碑","散氏盘","龙门二十品-北海王国太妃","史晨前后碑","真镜庵募缘疏卷","龙门二十品-长乐王丘穆","敛襟谈老氏诗","龙门二十品-孙秋生刘起祖二百人","苕溪诗帖","道德经","汉简6388","汉简6360","张玄墓志","多宝塔碑","唐诗将进酒曲","师虎簋","嵩高灵庙碑","积书岩帖（一）册","张好好诗","脚气帖","行书尊眷帖","戌嗣子鼎","玉泉帖","杨大眼造像记","松风阁诗","道因法师碑","温泉铭","大行皇后挽词","汉简6401","寄边衣诗帖","汉简6377","龙门二十品-郑长猷","曹全碑","泰山金刚经","始平公造像","漆书陶秀寔清异录","五言诗","石门铭","崔子玉座右铭","临师蘧敦盖","十七帖拓本(争座位帖后)","临张迁碑","汉汲黯传","千字文","大字阴符经","石门颂","召尊","大字麻姑仙坛记","爨宝子碑","龙门二十品-广川祖母太妃","汉简6407","西狭颂","断千字文","争座位帖","隶书五言联","古诗四帖","朱晦庵文语四屏","郑文公碑","蒙诏帖","瘗鹤铭","草书杂册纸本","礼器碑","毛公鼎","温彦博碑","离骚经","勤礼碑","玄秘塔碑","自叙帖","寒食帖","汉简6367","雁塔圣教序","汉简6386","汉简6375","研山铭","李思训碑","群玉堂述书帖","草书孝经","峄山碑","洞庭春色赋","冠军帖","行书录苏轼南堂诗轴","鹅群帖","草书千字文","易经","圣教序","答谢民师论文帖","刘中使帖","地黄汤帖","三坟记","李太师帖","鸭头丸帖","张季明帖","离洛帖","书谱","张翰帖","游目帖","九成宫醴泉铭","虹县诗","汉简6372","中山松醪赋","汝南公主墓志","李太白诗卷","诸上座帖","行书唐孙逖诗","草书团扇","留别黄州雪祠堂","多景楼诗","平复帖","神仙起居法","大学","大草千字文","五言律诗","赤壁赋"," 峿台铭","祭侄文稿全卷","宣示表","汉简6364","大盂鼎","神策军碑","雒州香山作","前赤壁赋","残秋入洛阳帖","论草书帖","汉简6374","自书告身","月赋","篆书铙歌","汉简6422"],

    "axisTick": {
                "show": false,
                "alignWithLabel": false,
                "inside": false
            },
            "axisLabel": {
                "show": true,
                "position": "top",
                "color": "#4c3623",
                "rotate": 90,
                "margin": 8,
                "interval": 0,
                "fontSize": 6,
                "fontFamily": "Microsoft YaHei"
            },
            "inverse": false,
            "offset": 0,
            "splitNumber": 5,
            "minInterval": 0,
            "splitLine": {
                "show": false,
                "lineStyle": {
                    "show": true,
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            }
        }],

yAxis: {
    "type": "category",
            "show": true,
            "scale": false,
            "nameLocation": "end",
            "nameGap": 15,
            "gridIndex": 0,
            "axisLine": {
                "show": true,
                "onZero": true,
                "onZeroAxisIndex": 0,
                "lineStyle": {
                    "show": true,
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid",
                    "color": "#533a24"
                }
            },
            "axisTick": {
                "show": false,
                "alignWithLabel": false,
                "inside": false
            },
            "axisLabel": {
                "show": true,
                "position": "top",
                "color": "#4c3623",
                "margin": 8,
                "interval": 0,
                "fontSize": 9,
                "fontFamily": "Microsoft YaHei"
            },
            "inverse": false,
            "offset": 0,
            "splitNumber": 5,
            "minInterval": 0,
            "splitLine": {
                "show": false,
                "lineStyle": {
                    "show": true,
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            },
  data:["茂密","文静","险峭","绵密","怪奇","老辣","狞厉","丰肥","丰润","高古","婉约","冲和","圆融","天真","肥劲","倔强","潇洒","飘逸","豪放","犷野","险劲","瘦硬","粗率","圆转","紧结","圆熟","疏朗","拙朴","清雅","自然","醇和","沉着","秀逸","爽利","端庄","劲健","老成","雄浑","颇骏","方正","刚健","工巧","古朴","姿媚","宽博"]
},

series:[{
    type:'scatter',
    name:"原版",
			data:data10, 
        
            symbolSize:function(value,params) 
	        {
	        
	        	return value[2]
	        },
	        itemStyle:{
	        	color:function(params){
                    return params["data"][3];  
	        	}
	        
	        },
        
            
          
    },
    {
    type:'scatter',
    name:"笔画",
			data:data13, 
        
            symbolSize:function(value,params) 
	        {
	        
	        	return value[2]
	        },
	        itemStyle:{
	        	color:function(params){
                    return params["data"][3];  
	        	}
	        
	        },
        
            
          
 }
 ,
 {
    type:'scatter',
    name:"章法统一",
			data:data14, 
        
            symbolSize:function(value,params) 
	        {
	        
	        	return value[2]
	        },
	        itemStyle:{
	        	color:function(params){
                    return params["data"][3];  
	        	}
	        
	        },
        
            
          
 }, 
 {
    type:'scatter',
    name:"一",
			data:data12, 
        
            symbolSize:function(value,params) 
	        {
	        
	        	return value[2]
	        },
	        itemStyle:{
	        	color:function(params){
                    return params["data"][3];  
	        	}
	        
	        },
        
            
          
 },
],
    "title": [
        {
            "text": "",
            "subtext": "t-SNE排序",
            "left": "7.5%",
            "top": 23,
            "itemGap": 10
        }
    ],   
"legend": [
{
"data": [
  "\u539f\u7248",
  "\u7ae0\u6cd5\u7edf\u4e00",
  "\u7b14\u753b",
  "一"
],
"selected": {
  "\u539f\u7248": true,
  "\u7ae0\u6cd5\u7edf\u4e00": true,
  "\u7b14\u753b": true,
  "一": true
},
"selectedMode": "single",
"show": true,
"right": "30%",
"top": 30,
"itemGap": 10,
"itemWidth": 25,
"itemHeight": 14
}
],
"tooltip": {
"show": true,
"trigger": "item",
"triggerOn": "mousemove|click",
"axisPointer": {
"type": "line"
},
"showContent": true,
"alwaysShowContent": false,
"showDelay": 0,
"hideDelay": 100,
"formatter": "{c},{a}",
"textStyle": {
"fontSize": 14
},
"borderWidth": 0,
"padding": 5
}
}
myChart.setOption(option);




// 基于准备好的dom，初始化echarts实例y
var myChart1 = echarts.init(document.getElementById('main1'));
// 指定图表的配置项和数据
var option = {
    "backgroundColor": "#fef8ef",
"animation": true,
"animationThreshold": 2000,
"animationDuration": 1000,
"animationEasing": "cubicOut",
"animationDelay": 0,
"animationDurationUpdate": 300,
"animationEasingUpdate": "cubicOut",
"animationDelayUpdate": 0,
xAxis: [{ 

       type: 'category', //x轴类型
                boundaryGap: false, //关闭两遍留白
                "axisLabel": {
                    interval: 0,
                    rotate:90,
                },
                "nameLocation": "end",
            "nameGap": 15,
            "gridIndex": 0,
            "axisLine": {
                "show": true,
                "onZero": true,
                "onZeroAxisIndex": 0,
                "lineStyle": {
                    "show": true,
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid",
                    "color": "#533a24"
                }},
                //x轴文字
    data: ["戌嗣子鼎","天亡簋","大盂鼎","召尊","师虎簋","散氏盘","毛公鼎","石鼓文","曾侯乙编钟","临师蘧敦盖","临石鼓文","峄山碑"," 峿台铭","三坟记","积书岩帖（一）册","朱晦庵文语四屏","篆书铙歌","汉简6360","汉简6364","汉简6367","汉简6372","汉简6374","汉简6375","汉简6377","汉简6386","汉简6388","汉简6401","汉简6407","汉简6422","石门颂","乙瑛碑","礼器碑","华山庙碑","史晨前后碑","西狭颂","曹全碑","张迁碑","何伯超墓志","泰山金刚经","嵩高灵庙碑","龙门二十品-北海王国太妃","龙门二十品-长乐王丘穆","始平公造像","龙门二十品-郑长猷","龙门二十品-广川祖母太妃","龙门二十品-孙秋生刘起祖二百人","石门铭","郑文公碑","漆书陶秀寔清异录","五言诗","崔子玉座右铭","隶书五言联","临张迁碑","爨宝子碑","荐季直表","宣示表","杨大眼造像记","瘗鹤铭","北魏常敬兰墓志铭","李璧墓志","张猛龙碑","张玄墓志","倪宽赞","夫子庙堂碑","九成宫醴泉铭","温彦博碑","雁塔圣教序","大字阴符经","道因法师碑","多宝塔碑","东方朔画赞碑","大字麻姑仙坛记","勤礼碑","自书告身","不空和尚碑","玄秘塔碑","神策军碑","千字文","敛襟谈老氏诗","大学","道德经","汉汲黯传","离骚经","鹅群帖","十七帖拓本(争座位帖后)","伯远帖","兰亭序","地黄汤帖","张翰帖","汝南公主墓志","温泉铭","圣教序","李思训碑","祭侄文稿全卷","争座位帖","蒙诏帖","张好好诗","虹县诗","群玉堂述书帖","脚气帖","寒食帖","张季明帖","李太师帖","蜀素帖","苕溪诗帖","洞庭春色赋","中山松醪赋","行书蔡行故卷","答谢民师论文帖","大行皇后挽词","松风阁诗","多景楼诗","研山铭","行书尊眷帖","月赋","行书唐孙逖诗","行书录苏轼南堂诗轴","留别黄州雪祠堂","鸭头丸帖","冠军帖","平复帖","游目帖","残秋入洛阳帖","古诗四帖","书谱","大草千字文","寄边衣诗帖","断千字文","刘中使帖","自叙帖","玉泉帖","神仙起居法","草书孝经","离洛帖","草书团扇","论草书帖","诸上座帖","草书千字文","真镜庵募缘疏卷","易经","赤壁赋","唐诗将进酒曲","李太白诗卷","前赤壁赋","草书杂册纸本","五言律诗","雒州香山作"],

    "axisTick": {
                "show": false,
                "alignWithLabel": false,
                "inside": false
            },
            "axisLabel": {
                "show": true,
                "position": "top",
                "color": "#4c3623",
                "rotate": 90,
                "margin": 8,
                "interval": 0,
                "fontSize": 6,
                "fontFamily": "Microsoft YaHei"
            },
            "inverse": false,
            "offset": 0,
            "splitNumber": 5,
            "minInterval": 0,
            "splitLine": {
                "show": false,
                "lineStyle": {
                    "show": true,
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            }
        }],

yAxis: {
    "type": "category",
            "show": true,
            "scale": false,
            "nameLocation": "end",
            "nameGap": 15,
            "gridIndex": 0,
            "axisLine": {
                "show": true,
                "onZero": true,
                "onZeroAxisIndex": 0,
                "lineStyle": {
                    "show": true,
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid",
                    "color": "#533a24"
                }
            },
            "axisTick": {
                "show": false,
                "alignWithLabel": false,
                "inside": false
            },
            "axisLabel": {
                "show": true,
                "position": "top",
                "color": "#4c3623",
                "margin": 8,
                "interval": 0,
                "fontSize": 9,
                "fontFamily": "Microsoft YaHei"
            },
            "inverse": false,
            "offset": 0,
            "splitNumber": 5,
            "minInterval": 0,
            "splitLine": {
                "show": false,
                "lineStyle": {
                    "show": true,
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            },
  data:["茂密","文静","险峭","绵密","怪奇","老辣","狞厉","丰肥","丰润","高古","婉约","冲和","圆融","天真","肥劲","倔强","潇洒","飘逸","豪放","犷野","险劲","瘦硬","粗率","圆转","紧结","圆熟","疏朗","拙朴","清雅","自然","醇和","沉着","秀逸","爽利","端庄","劲健","老成","雄浑","颇骏","方正","刚健","工巧","古朴","姿媚","宽博"]
},

series:[{
    type:'scatter',
    name:"原版",
			data:data21, 
        
            symbolSize:function(value,params) 
	        {
	        
	        	return value[2]
	        },
	        itemStyle:{
	        	color:function(params){
                    return params["data"][3];  
	        	}
	        
	        },
        
            
          
    },
    {
        //切换分类
    type:'scatter',
    name:"笔画",
			data:data22, 
        
            symbolSize:function(value,params) 
	        {
	        
	        	return value[2]
	        },
	        itemStyle:{
	        	color:function(params){
                    return params["data"][3];  
	        	}
	        
	        },
        
            
          
 }
 ,
 {
    type:'scatter',
    name:"章法统一",
			data:data23, 
        
            symbolSize:function(value,params) 
	        {
	        
	        	return value[2]
	        },
	        itemStyle:{
	        	color:function(params){
                    return params["data"][3];  
	        	}
	        
	        },
        
            
          
 }, 
 {
    type:'scatter',
    name:"一",
			data:data24, 
        
            symbolSize:function(value,params) 
	        {
	        
	        	return value[2]
	        },
	        itemStyle:{
	        	color:function(params){
                    return params["data"][3];  
	        	}
	        
	        },
        
            
          
 },
],
    "title": [
        {
            "text": "",
            "subtext": "书体排序",
            "left": "7.5%",
            "top": 23,
"itemGap": 10,
        }
    ],   
"legend": [
{
"data": [
  "\u539f\u7248",
  "\u7ae0\u6cd5\u7edf\u4e00",
  "\u7b14\u753b",
  "一"
],
"selected": {
  "\u539f\u7248": true,
  "\u7ae0\u6cd5\u7edf\u4e00": true,
  "\u7b14\u753b": true,
  "一": true
},
"selectedMode": "single",
"show": true,
"right": "30%",
"top": 30,
"itemGap": 10,
"itemWidth": 25,
"itemHeight": 14
}
],
"tooltip": {
"show": true,
"trigger": "item",
"triggerOn": "mousemove|click",
"axisPointer": {
"type": "line"
},
"showContent": true,
"alwaysShowContent": false,
"showDelay": 0,
"hideDelay": 100,
"formatter": "{c},{a}",
"textStyle": {
"fontSize": 14
},
"borderWidth": 0,
"padding": 5
}
}
myChart1.setOption(option);


    function chart2Init(chart) {
        chart2.clear() //清空实例
        let timeLine = [] //时间轴列表
        let optionData = [] //实例数据
        for (let i in data6) { //遍历json获取数据
            timeLine.push(data6[i]['年代'].toString()) //生成时间轴数据
            optionData.push({
                series: [{
                    data: [ //x轴对应数据
                        data6[i]['雄浑'],
                        data6[i]['秀逸'],
                        data6[i]['古朴'],
                        data6[i]['潇洒'],
                        data6[i]['险劲'],
                        data6[i]['文静'],
                        data6[i]['老辣'],
                        data6[i]['清雅'],
                        data6[i]['婉约'],
                        data6[i]['豪放'],
                        data6[i]['粗率'],
                        data6[i]['醇和'],
                        data6[i]['狞厉'],
                        data6[i]['端庄'],
                        data6[i]['刚健'],
                        data6[i]['圆熟'],
                        data6[i]['爽利'],
                        data6[i]['丰润'],
                        data6[i]['肥劲'],
                        data6[i]['瘦硬'],
                        data6[i]['茂密'],
                        data6[i]['疏朗'],
                        data6[i]['圆转'],
                        data6[i]['绵密'],
                        data6[i]['工巧'],
                        data6[i]['天真'],
                        data6[i]['丰肥'],
                        data6[i]['方正'],
                        data6[i]['老成'],
                        data6[i]['自然'],
                        data6[i]['犷野'],
                        data6[i]['冲和'],
                        data6[i]['沉着'],
                        data6[i]['劲健'],
                        data6[i]['拙朴'],
                        data6[i]['怪奇'],
                        data6[i]['姿媚'],
                        data6[i]['险峭'],
                        data6[i]['紧结'],
                        data6[i]['圆融'],
                        data6[i]['倔强'],
                        data6[i]['高古'],
                        data6[i]['宽博'],
                        data6[i]['颇骏'],
                        data6[i]['飘逸'],
                    ]
                }]
            })
        }


        let option = {
            backgroundColor: '', //背景色
            color: '#dea780', //区域颜色
            timeline: { //使用时间轴
                axisType: 'category',
                lineStyle: {
                    normal: {
                        color: "#d26326"
                    },
                    emphasis: {
                        color: '#6c1d30'
                    }
                },
                controlStyle: {
                    itemSize: 20,
                    normal: {
                        color: "#d26326"
                    },
                    emphasis: {
                        color: "#6c1d30",
                        borderColor: "#6c1d30"
                    }
                },
                itemStyle: {
                    normal: {
                        color: "#d26326"
                    },
                    emphasis: {
                        color: '#6c1d30',
                        borderColor: "#6c1d30",
                        borderWidth: 0
                    }
                },
                checkpointStyle: {
                    color: "#6c1d30"
                },
                label: {
                    textStyle: {
                        color: "#6c1d30"
                    }
                },
                progress: {
                    lineStyle: {
                        color: "#6c1d30"
                    },
                    itemStyle: {
                        color: "#6c1d30"
                    }
                },
                data: timeLine, //时间轴数据
                autoPlay: false,
                playInterval: 1000,
                loop: true
            }, animationDuration: 3000,
            animationEasing: "cubicInOut",

            tooltip: {

            },
            xAxis: {
                type: 'category', //x轴类型
                boundaryGap: false, //关闭两遍留白
                "axisLabel": {
                    interval: 0
                },//完整显示x坐标
                //x轴文字
                data: ['雄浑', '秀逸', '古朴', '潇洒', '险劲', '文静', '老辣', '清雅', '婉约', '豪放', '粗率', '醇和', '狞厉', '端庄', '刚健', '圆熟', '爽利', '丰润', '肥劲', '瘦硬', '茂密', '疏朗', '圆转', '绵密', '工巧', '天真', '丰肥', '方正', '老成', '自然', '犷野', '冲和', '沉着', '劲健', '拙朴', '怪奇', '姿媚', '险峭', '紧结', '圆融', '倔强', '高古', '宽博', '颇骏', '飘逸']
            },
            yAxis: {
                type: 'value',
                max: 0.4, //y轴上限
                min: 0 //y轴下限
            },
            series: [{
                type: 'line', //图表类型
                smooth: true, //线段类型 
                areaStyle: {}
            }],

            options: optionData
        }
        chart2.setOption(option) //生成实例
    }

        

    function chart4Init(chart) {
        chart4.clear() //清空实例
        let dataList = [] //节点列表
        let linkList = [] //关系列表
        //遍历数据获取节点与关系数据
        for (let i in data4) {
            let item = {
                id: i, //节点id
                name: '', //节点名称
                type: 3, //图表key 用于点击判断
                indexId: data4[i]['作品label'], //图表label
                x: data4[i]['D1'], //节点x坐标
                y: data4[i]['D2'], //节点y坐标
                symbol: '', //节点图形类型
                symbolSize: '4', //节点尺寸
                label: { //标签
                    show: false
                }

            }
            if (i % 4 == 1) { //更改原版为标题
                item.name = data4[i]['作品标题']
            } else {
                //节点名称
                item.name = data4[i]["小篆", "原版、章法统一、笔画、一"]
            }
            if (i % 4 == 0) {
                item.symbol = 'diamond' //节点形状
                item.symbolSize = 5 //节点大小
            } else if (i % 4 == 1) {
                item.symbol = 'rect'
                item.symbolSize = 16
                linkList.push(linkItem = { //节点关系
                    source: parseInt(i), //起点
                    target: parseInt(i) + 1, //目标
                    lineStyle: {
                        curveness: 0.2 //连接线弧度
                    }
                })
            } else if (i % 4 == 2) {
                item.symbol = 'roundrec'
                item.symbolSize = 12
                linkList.push(linkItem = {
                    source: parseInt(i),
                    target: parseInt(i) + 1,
                    lineStyle: {
                        curveness: 0.2
                    }
                })
            } else if (i % 4 == 3) {
                item.symbol = 'circle'
                item.symbolSize = 8
                linkList.push(linkItem = {
                    source: parseInt(i),
                    target: parseInt(i) - 3,
                    lineStyle: {
                        curveness: 0.2
                    }
                })
            }
            //设置分类
            if (data4[i]['书体'] == '大篆') {
                item.category = 0
            } else if (data4[i]['书体'] == '小篆') {
                item.category = 1
            } else if (data4[i]['书体'] == '隶') {
                item.category = 2
            } else if (data4[i]['书体'] == '楷') {
                item.category = 3
            } else if (data4[i]['书体'] == '行') {
                item.category = 4
            } else if (data4[i]['书体'] == '草') {
                item.category = 5
            }
            dataList.push(item)




        }
        console.log(linkList)
        let option = {
            animationDuration: 3000,
            animationEasing: "cubicInOut",
            backgroundColor: '', //背景色
            tooltip: {},
            legend: { //图例种类配置
                data: [{
                    name: '大篆',
                }, {
                    name: '小篆',
                }, {
                    name: '隶书',
                }, {
                    name: '楷书',
                }, {
                    name: '行书',
                }, {
                    name: '草书',
                    }],
                orient: 'vertical',
                left: 80,
                top: 50//图例位置
            },
            series: [{
                type: 'graph', //类型
                layout: 'none', //非力引导
                legendHoverLink: 'legendHoverLink', //开启图例筛选
                roam: true, //鼠标缩放
                label: { //关闭标签
                    show: false
                },
                emphasis: { //默认样式
                    focus: 'adjacency', //高凉后淡出其他节点
                    label: { //高亮开启标签
                        show: true
                    },
                },

                //分类对应颜色
                color: ['rgba(108,29,48,0.7)', 'rgba(189,55,47,0.7)', 'rgba(231,108,41,0.7)', 'rgba(217,141,36,0.7)', 'rgba(220,191,36,0.7)', 'rgba(202,182,115,0.7)'],
                edgeSymbol: ['circle', 'arrow'],
                edgeSymbolSize: [4, 6],
                data: dataList, //节点数据
                links: linkList, //节点关系
                categories: [{ //分类
                    name: '大篆'
                }, {
                    name: '小篆'
                }, {
                    name: '隶书'
                }, {
                    name: '楷书'
                }, {
                    name: '行书'
                }, {
                    name: '草书'
                }]

            }]
        }
        chart4.setOption(option) //生成实例
    }

 

    //初始化 图表
    chart1Init(chart1)
    chart2Init(chart2)

    chart4Init(chart4)
    window.onresize = function () {
        chart1.resize(); //窗口改变时重新修改图表大小
        chart2.resize();
        chart4.resize();

    }
    chart4.on('click', function (param) {
        console.log(param)
        if (param.data.type == 3) { //图3点击事件
            for (let i in data5) {
                if (param.data.indexId == data5[i]['作品label']) { //通过param.data.indexId判断和数据位置
                    //生成dom节点并添对应的图片和详情
                    const imgName = param.data.indexId + '_' + data5[i]['作品标题']
                    document.getElementById('image').style.display = "block"
                    document.getElementById('image').src = "image/image2/" + imgName + '.jpg'
                    document.getElementById('information').innerHTML = '作品名：' + data5[i]['作品标题'] + '<br/>书家：' + data5[i]['书家'] + '<br/>书体：' + data5[i]['书体'] + '<br/>年代上限：' + data5[i]['年代上限'] + '<br/>年代下限：' + data5[i]['年代下限'] + '<br/>物态：' + data5[i]['物态']
                }
            }
        }


    });
    chart2.on('click', function (param) {
        if (param.componentType == "timeline") { //图4点击事件
            chart4AddImg(param, "click")
        }
    });
    chart2.on('timelinechanged', function (param) {
        chart4AddImg(param, "timelinechanged")
    });
    chart2AddImg({ currentIndex: 1 }, "timelinechanged")

    function chart2AddImg(param, e) {
        document.getElementById('im2Ul').innerHTML = '' //清空底部列表
        let imgList = [] //符合条件的数据集合
        //遍历数据生成集合
        for (let i in data5) {

            if (e === 'timelinechanged' ? data5[i]['年代'] == data5[parseInt(param.currentIndex)]['年代'] : data5[i]['年代'] == param.name) {
                imgList.push({
                    id: data5[i]['作品label'],
                    '作品标题': data5[i]['作品标题'],
                    '书家': data5[i]['书家'],
                    '书体': data5[i]['书体'],
                    '年代上限': data5[i]['年代上限'],
                    '年代下限': data5[i]['年代下限'],
                    '物态': data5[i]['物态'],
                })
            }
        }
        console.log(imgList)
        //遍历imgList 获取数据 生成dom节点 并渲染
        for (let i in imgList) {

            var src = "image/image2/" + imgList[i].id + '_' + imgList[i]['作品标题'] + '.jpg'
            var title = ' 作品名：' + imgList[i]['作品标题']
            var shujia = '书家：' + imgList[i]['书家']
            var shuti = '  <br>书体：' + imgList[i]['书体']
            var yearup = ' <br>年代上限：' + imgList[i]['年代上限']
            var yeardown = '<br> 年代下限：' + imgList[i]['年代下限']
            var wutai = '<br>物态：' + imgList[i]['物态']
            //鼠标移动播放按钮停止
            var el = ` <li>
                        <div class="port-7 effect-1" onmouseenter="enablePlay(false)"">
                            <div class="image-box">
                                <img src="${src}" alt="">
                            </div>
                            <div class="text-desc add" >
                                <h5>${title}</h5>
                                <p>${shujia}${shuti}${yearup}${yeardown}${wutai}</p>
                             
                            </div>
                        </div>
                        </li>
                        `
            document.getElementById('im2Ul').innerHTML += el

          
        }
    }



    function enablePlay(enable) {
        chart4.dispatchAction({
            type: 'timelinePlayChange',
            // 播放状态，true 为自动播放
            playState: enable
        })
    }


</script>

</html>